<template>
  <el-container class="home-container">
    <el-aside width="auto">
      <side-bar></side-bar>
    </el-aside>

    <el-container style="position: relative">
      <el-header>
        <head-bar></head-bar>
      </el-header>

      <!--      todo tag-->
      <!--      <nuxt-link to="/home/test">-->
      <!--        <el-tag>Dashboard</el-tag>-->
      <!--      </nuxt-link>-->

      <el-main>
        <!--        nuxt版本router-view-->
        <nuxt-child/>
      </el-main>

    </el-container>
  </el-container>
</template>

<script>
  import SideBar from "../layouts/components/SideBar/index";
  import HeadBar from "../layouts/components/HeadBar/index";
  // 在单独构建的版本中辅助函数为 Vuex.mapState
  import { mapState } from 'vuex'
  export default {
    name: "home",
    head() {
      return {
        title: "初意",
        meta: [
          {hid: 'description', name: 'about', content: '初意'}
        ]
      }
    },
    components: {HeadBar, SideBar},
    data() {
      return {
      };
    },
    // computed: {
    //   isCollapse() {
    //     return this.$store.state.modules.sidebar.opened
    //   }
    // },
    // 当一个组件需要获取多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性
    // computed: mapState({
    //   isCollapse: state => state.modules.sidebar.opened
    // }),
    // 使用对象展开运算符将 此对象混入到外部对象中
    computed: {
      ...mapState({
        isCollapse :state => state.modules.sidebar.opened
      }),
    },
    methods: {

    }
  };
</script>


<style lang="scss">
  .home-container {
    width: 100%;
    min-height: 100vh;
    /*border: 1px solid #eee;*/
    .el-main {
      height: calc(100vh - 62px);
      padding: 0;
    }
    .el-header {
      padding: 0;
      height: 50px !important;
    }
    .page-enter-active,
    .page-leave-active {
      transition: opacity 0.5s;
    }
    .page-enter,
    .page-leave-active {
      opacity: 0;
    }
  }

</style>
